<template>
  <div class="attr-list">
    <CommonAttr />
    <px-button v-if="curComponent.propValue.type === 'camera'" @click="preview"> 预览视频 </px-button>
    <px-form>
      <px-form-item label="num">
        <px-input
          v-model="
            //@ts-ignore
            curComponent.propValue.num
          "
        />
      </px-form-item>
      <px-form-item label="tip">
        <px-input
          v-model="
            //@ts-ignores
            curComponent.propValue.tip
          "
        />
      </px-form-item>
      <px-form-item label="routerKey">
        <px-input
          v-model="
            //@ts-ignores
            curComponent.propValue.routerKey
          "
        />
      </px-form-item>
      <px-form-item label="groupName">
        <px-input
          v-model="
            //@ts-ignores
            curComponent.propValue.groupName
          "
        />
      </px-form-item>
      <px-form-item label="code">
        <px-input
          v-model="
            //@ts-ignores
            curComponent.propValue.code
          "
        />
      </px-form-item>
      <px-form-item label="category">
        <px-input
          v-model="
            //@ts-ignores
            curComponent.propValue.category
          "
        />
      </px-form-item>
      <px-form-item label="type">
        <px-select
          v-model="
            //@ts-ignores
            curComponent.propValue.type
          "
          class="m-2"
          placeholder="选择类型"
          @change="typeChange"
        >
          <px-option v-for="item in options" :key="item" :label="item" :value="item" />
        </px-select>
      </px-form-item>
      <px-form-item label="openPage">
        <px-input
          v-model="
            //@ts-ignores
            curComponent.propValue.openPage
          "
        />
      </px-form-item>
      <px-form-item label="cameraUrl">
        <px-input
          v-model="
            //@ts-ignores
            curComponent.propValue.cameraUrl
          "
        />
      </px-form-item>
    </px-form>
    <px-dialog
      v-model="carameDialogVisible"
      title="摄像头监控"
      width="700px"
      destroy-on-close
      modal-class="px--visual-camera__dialog"
      style="pointer-events: auto"
      draggable
      :modal="false"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      @close="closeDialog"
    >
      <div class="flex w-[100%] h-[100%] justify-center">
        <!-- <video id="flvVideo" ref="flvRef" width="600" style="object-fit: fill" muted controls autoplay @click="videoClick" /> -->
        <div ref="flvRef" style="width: 600px" />
      </div>
    </px-dialog>
  </div>
</template>

<script setup lang="ts">
import CommonAttr from "@visual/custom-component/common/CommonAttr.vue";
import { useComponent } from "@visual/stores";
import { storeToRefs } from "pinia";
import useFlv from "@visual/utils/useFlv";

import { ref } from "vue";
const carameDialogVisible = ref(false);
const flvRef = ref();

const options = ref(["people", "sensor", "temperature", "camera", "callin", "error"]);
const componentStore = useComponent();
const { curComponent } = storeToRefs(componentStore);
const { getFlv, videoClick, destoryVideo } = useFlv({ videoRef: flvRef, cameraUrl: curComponent.value.propValue.cameraUrl });

const typeChange = item => {
  //@ts-ignores
  curComponent.value.propValue.filter = `menu_all menu_${item}`;
};
function preview() {
  carameDialogVisible.value = true;
  try {
    getFlv();
  } catch (e) {
    console.error(e);
  }
}
const closeDialog = () => {
  destoryVideo();
};
</script>
